<template>
  <div class="wrapper" :class="{extend: extend}">
    <form @submit.prevent>
      <input ref="input" type="text" placeholder="ToKnow"
      @change="handleChange($event)"
      :value="searchValue">
      <button class="iconfont icon-search"
      @click="$emit('search')">
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  props: {
    searchValue: String
  },
  emits: ['update:searchValue', 'search'],
  data() {
    return {
      extend: false
    }
  },
  methods: {
    focus() {
      this.$refs.input.focus();
    },
    handleChange(e) {
      this.$emit('update:searchValue', e.target.value);
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
  .wrapper {
    width: var(--searchBarWidth);
    height: var(--searchBarHeight);
    display: flex;
    align-items: center;
    transition: .3s;

    form {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: var(--searchBarInnerHeight);
      border-radius: 5%;
      box-shadow: 0px 0px 1px var(--gray);
      transition: .15s;
      font-size: var(--searchBarFontSize);
      background-color: var(--backgroundColor);

      &:focus-within {
        box-shadow: 0 0 3px var(--gray);
      }

      input,
      button {
        height: 100%;
        border: none;
        outline: none;
        background-color: transparent;

        font-size: var(--searchBarFontSize);
      }

      input {
        width: 70%;
        flex-shrink: 1;
        box-sizing: border-box;
        padding-left: 10px;
      }

      button {
        flex-shrink: 0;
        width: var(--searchBarInnerHeight);
        transition: .3s;
        border-radius: 10%;

        &:hover {
          background-color: var(--light);
          cursor: pointer;
        }
      }
    }
  }
</style>